<template>
  <div class="frame">
    <div class="animated bounceIn animated-delay right-append-menu">
      <div class="ps-dialog-head">
        <div class="ps-dialog-title">
          <p>数据管理</p>
        </div>
        <span class="ps-dialog-close close" @click="ClosePop"></span>
      </div>
      <div class="ps-dialog-body">
        <div class="ps-dialog-body--broad">
          <div class="block_manner">
            <p class="block_manner_title">国家</p>
            <el-scrollbar style="width: 100%; height: 100%">
              <ul class="list">
                <li
                  v-for="(item, i) in globalCountrySetting"
                  :key="i"
                  @click="bindchangeCountry(item)"
                  :class="nowCountry.id == item.id ? 'activeNow' : ''"
                >
                  {{ item.name }}
                </li>
              </ul>
            </el-scrollbar>
          </div>

          <div
            class="block_manner"
            v-loading="islistLoad"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
          <p class="block_manner_title">实体模型</p>
            <el-scrollbar style="width: 100%; height: 100%">
              <ul class="list-m">
                <el-tree
                  :data="modelsData"
                  :props="defaultProps"
                  default-expand-all
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  @node-click="handleNodeClick"
                  node-key="id"
                  ref="trees"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span style="color: #fff">
                      {{ data.label_name }}&nbsp;&nbsp;</span
                    >
                  </span>
                </el-tree>
              </ul>
            </el-scrollbar>
          </div>
        </div>
        <div class="ps-dialog-body--checkedlist">
          <!-- <div class="checked_common top">
            <el-empty
              v-if="bottomModeMapView.checkedlist.length == 0"
              style="width: 100%; height: 100%"
              :image-size="50"
              description="请勾选基地"
            ></el-empty>
            <el-scrollbar v-else style="width: 100%; height: 100%">
              <div class="checked_state">
                <el-tag
                  v-for="tag in bottomModeMapView.checkedlist"
                  :key="tag.id"
                  @close="closeTag(tag)"
                  closable
                  effect="dark"
                  style="margin-top: 10px"
                >
                  {{ tag.attrs | formval }}
                </el-tag>
              </div>
            </el-scrollbar>
          </div> -->
          <div class="checked_common bottom">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; height: 100%"
              :cell-style="celltyle"
              :row-style="rowstyle"
              :header-cell-style="headerstyle"
              @select="handleSelectionChange"
              :highlight-current-row="false"
              :show-header="false"
              height="100%;"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="名称" align="center">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.attrs | formval }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="checked_common footer">
            <el-button
              size="mini"
              :disabled="currentPage == 1"
              type="text"
              @click="backPage"
              >上一页</el-button
            >
            <el-pagination
              background
              small
              :page-size="20"
              :pager-count="5"
              @current-change="ChangePage"
              :current-page.sync="currentPage"
              layout="pager,total"
              :total="total"
            >
            </el-pagination>
            <el-button size="mini" type="text" @click="loadingPage"
              >下一页</el-button
            >
          </div>
        </div>
      </div>
      <div class="ps-dialog-foot"></div>
    </div>
  </div>
</template>

<script>
import "../../../../globle/js/animate/animate.min.css";
import {
  showLoading,
  hideLoading
} from '../../../server/loading.js'
import {
  mapGetters,
  mapMutations
} from "vuex";
export default {
  // name: 'base',
  data() {
    return {
      nowCountry: {
        id: "",
        name: "",
        node: {}
      },
      modelsData: [], //树形数据
      defaultProps: {
        label: "label_name",
        children: "children",
      },
      islistLoad: false, //模型列表加载
      tableData: [], //待勾选
      currentPage: 1,
      total: 0,
    };
  },
  computed: {
    ...mapGetters(["globalCountrySetting", "bottomModeMapView"]),
  },
  mounted() {
    this.initGetModelTree();
  },
  filters: {
    formval(arr) {
      for (let a of arr) {
        if (a.name == '名称') {
          return a.value;
        }
      }
    }
  },
  methods: {
    ...mapMutations(["changeBaseChecked", "deleteBaseChecked", "OPENWindowBase", 'changeDataNum', 'changeBaseCheckedSpcial', 'deleteBaseCheckedSpcial']),
    //单元格样式
    celltyle() {
      return `
       cursor:pointer;
        color: #fff
        background-color:rgba(0, 0, 0, 0.76);
        border-bottom: 1px solid #040620;
        font-size:1rem;
        `;
    },
    //表头的样式
    headerstyle() {
      return `
          cursor:pointer
          border-bottom: 1px solid #040620;
          font-size:1rem;
          color: #fff;
          background-color:rgba(0, 0, 0, 0.76);
        `;
    },
    rowstyle() {
      return `
        cursor:pointer;
        background-color:rgba(0, 0, 0, 0.76);
        `;
    },
    //请求模型数据
    initGetModelTree() {
      this.islistLoad = true;
      this.$store.dispatch("ajaxApi", {
        // this.$store.dispatch("ajax", {
        url: `/services/app-zonghe/api/dicLabel/tree?type.notEquals=5`,
        method: "get",
        data: {
          page: 1,
          number: 99
        },
        succeed: (res) => {
          // console.log(res);
          this.islistLoad = false;
          this.modelsData = res;
        },
        errored: (err) => {
          // console.log(err);
          if (err.response) {
            this.islistLoad = false;
            this.modelsData = [];
          }
        }
      });
    },
    //关闭弹框
    ClosePop() {
      this.OPENWindowBase({
        isOpen: false,
        type: 'base'
      });
    },
    //关闭tag
    closeTag(tag) {
      console.log(tag);
      if (this.bottomModeMapView.checkedIDlist.indexOf(tag.id) > -1) {
        this.deleteBaseChecked(this.bottomModeMapView.checkedIDlist.indexOf(tag.id))
        this.$refs['multipleTable'].toggleRowSelection(tag);
      }
      if (this.bottomModeMapView.checkedLIDlist.indexOf(tag.id) > -1) {

      }
    },
    //国家改变值
    bindchangeCountry(item) {
      this.nowCountry.id = item.id;
      this.nowCountry.name = item.name;
      console.log(item)
      console.log(this.nowCountry.node)
      this.getCountryDotNum(item);
      if (JSON.stringify(this.nowCountry.node) !== '{}') {
        this.currentPage = 1;
        this.total = 0;
        this.getBasement(this.nowCountry.node);
      }
    },
    //点击节点
    handleNodeClick(data, node) {
      // console.log(data);
      // console.log(data.children);
      console.log(this.nowCountry);
      console.log(this.bottomModeMapView.checkedSpeciallist);
      // this.menuVisible = false;
      // this.currentTreeData = data;
      // //   this.selModel(data);
      // this.zTree = $.fn.zTree;
      // //  console.log(this.zTree._z)
      // this.zTree._z.view.replaceModelClass(this.antObj.e, this.antObj.node, data);
      this.nowCountry.node = data;
      if (this.nowCountry.name) {
        this.currentPage = 1;
        this.total = 0;
        this.getBasement(data);
        if (this.bottomModeMapView.checkedSpeciallist.length > 0) {
          setTimeout(() => {
            this.bottomModeMapView.checkedSpeciallist.forEach(res => {
              console.log(res);
              console.log(this.tableData);
              for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].id == res.id) {
                  this.$refs['multipleTable'].toggleRowSelection(this.tableData[i]);
                }
              }
            });
          }, 1500)
        }
      }
      // this.$emit('changeModel',data)
    },
    //获取上一页数据
    backPage() {
      //只有选择后才能点击
      if (JSON.stringify(this.nowCountry.node) !== '{}') {
        this.getBasement(this.nowCountry.node, 'back');
      }
    },
    //获取下一页数据
    loadingPage() {
      //只有选择后才能点击
      if (JSON.stringify(this.nowCountry.node) !== '{}') {
        this.getBasement(this.nowCountry.node, 'add');
      }
    },
    //分页器 改变页码
    ChangePage(val) {
      this.getBasement(this.nowCountry.node);
      this.currentPage = val;
    },
    getCountryDotNum(item) {
      this.$store.dispatch("ajaxApi", {
        // this.$store.dispatch("ajax", {
        url: `/services/app-zonghe/api/example/cypher/nodes/things/_count?国家.equals=${item.name}`,
        method: "get",
        succeed: (res) => {
          this.$store.dispatch("ajaxApi", {
            // this.$store.dispatch("ajax", {
            url: `/services/app-zonghe/api/example/cypher/relationships/things/_count?a.国家.equals=${item.name}&b.国家.equals=${item.name}`,
            method: "get",
            succeed: (tes) => {
              this.changeDataNum({ nodeNum: res, lineNum: tes })
            }
          });
        }
      });
    },
    //获取实例
    getBasement(node, type) {
      // console.log(node);
      let pageNum = this.currentPage;
      if (type) {
        if (type == 'add') {
          ++pageNum;
        } else {
          --pageNum;
        }
      }
      let tmpParam = {};
      tmpParam['node'] = {};
      tmpParam['node']['where'] = {};
      tmpParam['node']['where']['bool_and'] = [];
      tmpParam['node']['where']['bool_and'][0] = {};
      tmpParam['node']['where']['bool_and'][0]['国家.equals'] = {};
      tmpParam['node']['where']['bool_and'][0]['国家.equals'] = this.nowCountry.name;
      tmpParam['relationship'] = {};
      tmpParam['relationship']['where'] = {};
      tmpParam['relationship']['where']['bool_and'] = [];
      showLoading()
      this.$store.dispatch("ajaxApi", {
        // this.$store.dispatch("ajax", {
        url: `/services/app-zonghe/api/example/g6_dataformat/nodes_and_relationships/${node.label_name}/_search?page=${pageNum - 1}&size=20`,
        method: "POST",
        data: tmpParam,
        succeed: (res) => {
          console.log(res);
          hideLoading()
          if (res.data.length > 0) {
            this.tableData = res.data;
            if (pageNum * 20 > this.total || this.total == 0) {
              this.total += res.data.length;
            }
            this.currentPage = pageNum;
          } else {
            this.currentPage = pageNum;
            if (pageNum > 1) {
              this.$message.error('下一页无数据!')
              return;
            }
            this.tableData = [];
            this.$message.error('暂无数据!')
          }
        }
      });
    },
    //勾选节点
    handleSelectionChange(selection, row) {
      // this.multipleSelection = val;
      // console.log(selection);
      console.log(row);
      let obj = {};
      obj = JSON.parse(JSON.stringify(row));
      obj['age'] = {};
      obj.age = row;
      if (this.bottomModeMapView.checkedlist.length == 0 && this.bottomModeMapView.checkedSpeciallist.length == 0) {
        obj.fatherName = this.nowCountry.name;
        obj.fatherId = this.nowCountry.id;
        obj.troopsForm = "";
        obj.coordinate = "";
        obj.name = "";

        obj.serialNumber = row.id;
        obj.position = [];
        for (let i in obj.attrs) {
          console.log(i)
          if (obj.attrs[i].name == '坐标') {
            obj.coordinate = obj.attrs[i].value;
          } else if (obj.attrs[i].name == '名称') {
            obj.name = obj.attrs[i].value;
          } else if (obj.attrs[i].name == '纬度') {
            obj.position[0] = obj.attrs[i].value;
          } else if (obj.attrs[i].name == '经度') {
            obj.position[1] = obj.attrs[i].value;
          } else if (obj.attrs[i].name == "基地简介") {
            obj.troopsForm = obj.attrs[i].value;
          } else if (obj.attrs[i].name == "路径") {
            obj.json = obj.attrs[i].value;
          } else {
            obj[obj.attrs[i].name] = obj.attrs[i].value;
          }
          if (i == obj.attrs.length - 1) {
            // console.log(obj);
            if (obj.json) {
              if (obj['类型'] == "面数据") {
                obj['LId'] = 'face' + obj.id;
              } else if (obj['类型'] == "线数据") {
                obj['LId'] = 'line' + obj.id;
              } else if (obj['类型'] == "点数据") {
                obj['LId'] = 'pot' + obj.id;
              }
              this.$emit('loadingFile', obj, true)
              this.changeBaseCheckedSpcial(obj)
            } else {
              this.changeBaseChecked(obj)
              this.markdownDot(obj)
            }
          }
        }
      } else {
        //如果已经存在 勾选删除
        if (this.bottomModeMapView.checkedIDlist.indexOf(row.id) > -1) {
          this.deleteBaseChecked(this.bottomModeMapView.checkedIDlist.indexOf(row.id))
        } else
          if (this.bottomModeMapView.checkedLIDlist.indexOf(row.id) > -1) {
            for (let i in obj.attrs) {
              if (obj.attrs[i].name == '坐标') {
                obj.coordinate = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '名称') {
                obj.name = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '纬度') {
                obj.position[0] = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '经度') {
                obj.position[1] = obj.attrs[i].value;
              } else if (obj.attrs[i].name == "基地简介") {
                obj.troopsForm = obj.attrs[i].value;
              } else if (obj.attrs[i].name == "路径") {
                obj.json = obj.attrs[i].value;
              } else {
                obj[obj.attrs[i].name] = obj.attrs[i].value;
              }
              if (i == obj.attrs.length - 1) {
                // console.log(obj);
                if (obj.json) {
                  if (obj['类型'] == "面数据") {
                    obj['LId'] = 'face' + obj.id;
                  } else if (obj['类型'] == "线数据") {
                    obj['LId'] = 'line' + obj.id;
                  } else if (obj['类型'] == "点数据") {
                    obj['LId'] = 'pot' + obj.id;
                  }
                  this.deleteBaseCheckedSpcial(this.bottomModeMapView.checkedLIDlist.indexOf(row.id));
                  this.$emit('loadingFile', obj, false)
                }
              }
            }
          } else {
            obj.fatherName = this.nowCountry.name;
            obj.serialNumber = row.id;
            obj.name = "";
            obj.fatherId = this.nowCountry.id;
            obj.troopsForm = "";
            obj.position = [];
            obj.coordinate = "";

            for (let i in obj.attrs) {
              console.log(i)
              if (obj.attrs[i].name == '坐标') {
                obj.coordinate = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '名称') {
                obj.name = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '纬度') {
                obj.position[0] = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '经度') {
                obj.position[1] = obj.attrs[i].value;
              } else if (obj.attrs[i].name == "基地简介") {
                obj.troopsForm = obj.attrs[i].value;
              } else if (obj.attrs[i].name == "路径") {
                obj.json = obj.attrs[i].value;
              } else {
                obj[obj.attrs[i].name] = obj.attrs[i].value;
              }
              if (i == obj.attrs.length - 1) {
                // console.log(obj);
                if (obj.json) {
                  if (obj['类型'] == "面数据") {
                    obj['LId'] = 'face' + obj.id;
                  } else if (obj['类型'] == "线数据") {
                    obj['LId'] = 'line' + obj.id;
                  } else if (obj['类型'] == "点数据") {
                    obj['LId'] = 'pot' + obj.id;
                  }
                  this.$emit('loadingFile', obj, true)
                  this.changeBaseCheckedSpcial(obj)
                } else {
                  this.changeBaseChecked(obj)
                  this.markdownDot(obj)
                }
              }
            }
          }
      }
    },
    //标记地图上点
    markdownDot(dot) {
    console.log(dot);
      //请求关系
      let relationlist = [];
      let params = {};
      params = {
        "where": {
          "bool_and": [{
            "bool_or": [{
              "a.id.equals": dot.id
            },
            {
              "b.id.equals": dot.id
            }
            ]
          }]
        }
      }
      showLoading()
      this.$store.dispatch("ajaxApi", {
        url: `/services/app-zonghe/api/example/g6_dataformat/relationships/things/_search`,
        method: "post",
        data: params,
        succeed: (res) => {
          console.log(res);
          hideLoading()
          for (let t of res.data) {
            let obj = {};
            obj = t;
            obj.fatherName = this.nowCountry.name;
            obj.fatherId = this.nowCountry.id;
            obj.troopsForm = "";
            obj.coordinate = "";
            obj.name = "";

            obj.serialNumber = t.id;
            obj.position = [];
            for (let i in obj.attrs) {
              if (obj.attrs[i].name == '坐标') {
                obj.coordinate = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '名称') {
                obj.name = obj.attrs[i].value;
              } else if (obj.attrs[i].name == '纬度') {
                obj.position[0] = Number(obj.attrs[i].value);
              } else if (obj.attrs[i].name == '经度') {
                obj.position[1] = Number(obj.attrs[i].value);
              } else if (obj.attrs[i].name == "基地简介") {
                obj.troopsForm = obj.attrs[i].value;
              }
            }
            relationlist.push(obj)
          }
          this.$emit("chooseMap", dot, relationlist);
        },
        errored: (err) => {
          console.log(err);
        }
      });
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../styles/basement.less");

.el-scrollbar__wrap {
  overflow: auto;
  width: 100%;
  height: 100%;
}

::v-deep.el-tree-node__content {
  &:hover {
    background-color: red;
  }
}
</style>
<style>
.el-table {
  background-color: rgba(0, 0, 0, 0.76);
}

.el-table th,
.el-table tr {
  background-color: rgba(0, 0, 0, 0.76);
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0.76) !important;
}

.el-tree-node__content:hover {
  background-color: #04b1ca;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #04b1ca;
}
</style>